<template>
	<view class="tui-recommend">
		<view class="tui-flex" style="padding-left: 30rpx;">
			<view class="rec-tag" v-for="(item, index) in list" :key="index">
				<uni-tag :text="item.name" circle @click="tagTo(item, index)"
					:class="tagIndex == index? 'uni-tags' : 'uni-tag-box'"></uni-tag>
			</view>
		</view>
		<view class="tui-mg-bottom">
			<block v-for="(item, index) in list" :key="index" v-if="tagIndex == index">
				<ls-swiper
					:list="item.children" recommend imgKey="image" boxWidth="100%"
					imgWidth="97%" imgHeight="75%" :previousMargin="30" :nextMargin='14'
					:height="250" :imgRadius="5" @clickItem="clickItem"/>
			</block>
		</view>
	</view>
</template>

<script>
	import lsSwiper from '@/components/ls-swiper/index.vue'
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	
	export default {
		components: {
			lsSwiper,
			uniTag
		},
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				imgList: [],
				tagIndex: 0
			}
		},
		onLoad() {
			
		},
		created() {
		},
		methods: {
			tagTo(item, index) {
				this.tagIndex = index
			},
            clickItem(item) {
                console.log(item)
                uni.navigateTo({
                    // url: '/pages/index/components/details?content=' + item.detail
                    url: `/pagesA/ticket/components/ticketDetail?id=${item.spuId}`
                })
            }

		}
	}
</script>

<style lang="scss">
	.tui-recommend {
		margin: 20rpx 0;
		.rec-tag {
			&:nth-child(2) {
				margin: 0 20rpx;
			}
			.uni-tags {
				background-color: #8797A5;
				border-color: #8797A5;
				/deep/.uni-tag--default {
					color: #fff;
				}
			}
			.uni-tag-box {
				border-color: #666;
				background-color: rgba(0, 0, 0, 0);
				/deep/.uni-tag--default {
					color: #666;
				}
			}
		}
		.tui-mg-bottom {
			margin-top: 30rpx;
		}
	}
</style>
